<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>培训课程</title>
    <link rel="stylesheet" href="/index/css/common.css">
    <link rel="stylesheet" href="/index/css/lesson_type.css?v=4">
</head>
<body>
<div class="tabsBox">
    <div class="topTab">
        <a class="tabLeft" href="/">
            <img src="/index/assets/left_J.png">
        </a>
        <div class="tabCenters">分类</div>
        <!-- <div class="tabRight">特权说明</div> -->
    </div>
</div>
<div class="pxBox">
    <div class="pxLeft">
        {foreach $types as $key=>$v}
        <div class="l_Name {if (empty(input('type_id')) && $key==0) || input('type_id')==$v['id']}on{/if}" type_id="{$v.id}">{$v.type_name}</div>
        {/foreach}

    </div>

    <div class="pxRight">
        {foreach $types as $k=>$val}
        <div class="r_Box {if (empty(input('type_id')) && $k==0 ) ||  input('type_id')==$val['id']}active{/if}" type_id="{$val.id}">
            {if $val.image}
            <img src="{$img_path}{$val.image}">
            {/if}
            <div class="r_title">{$val.type_name}</div>
            <div class="lesson-list">

            </div>

        </div>
        {/foreach}

    </div>
</div>

{include file='common/menu'}
</body>
<script type="text/javascript" src="/index/js/jquery-3.4.1.min.js"></script>
<script src="/index/js/common.js"></script>
<script>
    $(function () {

        getData($('.on').attr('type_id'));

        $('.l_Name').click(function () {
            var index = $(this).index();
            $(this).addClass("on").siblings().removeClass("on");
            $(".r_Box").eq(index).addClass("active").siblings().removeClass("active");

            var type_id = $(this).attr('type_id');

            if(type_id>0 && !$(this).find('.lesson-list').html()){
                getData(type_id);
            }
        })

        //获取课程列表
        function getData(type_id){

            console.log(type_id);
            $.get("{:url('getList')}",{type_id:type_id},function(res){
//

                if(res.code==1 && res.data.length>0){
                    var data = res.data;
                    var _html = '';
                    for( key in data){
                        _html +='<a class="pxClass" href="{:url("details")}?id='+data[key].id+'">'+data[key].lesson_name+'</a>';
                    }

                    $('.active').children('.lesson-list').html(_html);
                }else{
                    $('.active').children('.lesson-list').html('<p style="text-align: center">暂无课程~</p>');

                }
            })
        }

    })
</script>
</html>